<template>
	<div class="box">
		<van-sidebar v-model="active">
			<van-sidebar-item :title="item.name" v-for="item in categoryList" :key="item.id"
				@click="getList(item.id)" />
		</van-sidebar>

		<div class="right" v-for="item in categoryList" :key="item.id" v-show="a === item.id">
			
			<div class="right-cont1">
				<img :src="item.banner_url">
				<h5>{{ item.front_name }}</h5>
			</div>
			
			<div class="right-cont2">
				<span></span>
				<h3>{{item.name}}</h3>
			</div>
			
			<ul class="right-cont3">
				<li v-for="item in currentCategory.subCategoryList" :key="item.id">
					<div>
						<img :src="item.wap_banner_url" />
						<p>{{item.name}}</p>
					</div>
				</li>
			</ul>
			
		</div>
	</div>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios'
export default {
	props: ['categoryList'],
	data(){
		return {
			a:1005000,
			currentCategory:[]
		}
	},
	setup() {
		const active = ref(0);
		return { active };
	},
	created(){
		this.getList(1005000)
	},
	methods: {
		getList(page) {
			axios.get('/api/catalog/current', { params: { id: page } }).then((res => {
				console.log(res);
				this.currentCategory=res.data.data.currentCategory
			}))
			this.a = page
		}
	}
}
</script>
<style scoped>

.box{
	display: flex;
}
.van-sidebar{
	overflow-y: auto;
}
.right{
	width: 86%;
}
.right-cont1{
	width: 100%;
    position: relative;
}
.right-cont1>img{
	width: 285px;
	height: 140px;
	margin: 0 0.18rem;
    border-radius: 0.13333rem;
    box-shadow: 0 0 0.16rem #000;
    filter: brightness(.5);
}
.right-cont1>h5{
	width: 100%;
    color: #fff;
    position: absolute;
    top: 48%;
    left: 0;
    z-index: 222;
    text-align: center;
	font-weight: 400;
	font-size: 16px;
}
.right-cont2{

	width: 100%;
    height: 1.33333rem;
    position: relative;
    background: #fff;
    font-size: .42667rem;
}
.right-cont2>span{
	width: 50%;
    height: 0.05333rem;
    background-color: #ccc;
    position: absolute;
    margin: auto;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}
.right-cont2>h3{
	width: 30%;
    height: 1.06667rem;
    background-color: #fff;
    position: absolute;
    margin: auto;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    line-height: 1.06667rem;
    text-align: center;
    color: #000;
}
.right-cont3{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content:left;
}
.right-cont3>li{
	width: 100px;
	height: 92px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.right-cont3>li>div{
	width: 50%;
	margin: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.right-cont3>li>div>img{
	width: 28px;
	height: 28px;
}
.right-cont3>li>div>p{
	font-size: 12px;
	line-height: 36px;
}
</style>